/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {StyleSheet, Text,Alert,NativeModules, DeviceEventEmitter, NetInfo, Modal, TouchableOpacity, ScrollView, InteractionManager, PixelRatio, StatusBar, View, Platform, BackHandler, Dimensions, Image, RefreshControl, ListView, TouchableHighlight,TouchableWithoutFeedback} from 'react-native';

import Swiper from 'react-native-swiper';

import Toast from 'react-native-root-toast';

import {CachedImage} from "react-native-img-cache";

import Common from '../../component/common';

import Carousel from '../../component/carousel';

import Detail from './detail';

import Loading from '../../component/loading';

import LoadError from '../../component/loadError';

import Search from '../search/search';

import BriefIntroduction from '../specialColumn/briefIntroduction';

import SpecialColumnDetails from '../specialColumn/columnDetails';

import Article from './article';

import RankList from './rankList';

import NewsList from './newsList';

import ShapeModal from '../../component/shapeModal';

const os = Platform.OS;

const STATUS_BAR_HEIGHT = StatusBar.currentHeight || 20;

const totalWidth = Dimensions.get('window').width;

const totalHeight = Dimensions.get('window').height;

export default class Index extends Component {
  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      scrollHeight: 0,
      isRefreshing: false,
      typeList: ds,
      loading: true,
      success: false,
      errorMessage: '',
      typeStatus: 'variety',
      timeStatus: 1,
      dataList: [],
      modalVisible: false,
      isList: true,
      isConnected: false,
      checkDevice:'',
      escape: false,
      slider1ActiveSlide: 0,
      showCheckVersionModal:false,
      timestamp: '',
      keyWord: []
    };
    this.swiper = [];
    this.typeList = [];
    this.typeListDay = [];
    this.typeListWeek = [];
    this.typeListMonth = [];
    this.typeListHistory = [];
    this.oneDayNews = {};
  }
  componentWillMount(){
    Common.checkDevice((checkDevice) => {
      this.setState({checkDevice});
    });
    NetInfo.isConnected.fetch().done(
      (isConnected) => {
        this.setState({
          isConnected: isConnected
            })    
      }
    );
    NetInfo.isConnected.addEventListener(
        'connectionChange',
        (isConnected) => {
          this.setState({isConnected});
        }
    );
  }
  componentDidMount(){
    this.fetchBillboardData();
    this.timer = setInterval(() => {
      let formData = new FormData();
      formData.append("timestamp", this.state.timestamp);
      Common.fetchData("post", "/billboard/activeRefresh", formData, (responseData) => {
        if(responseData.entity.refresh){
          this.typeList = [];
          this.typeListDay = [];
          this.typeListWeek = [];
          this.typeListMonth = [];
          this.typeListHistory = [];
          this.fetchTimeData(this.state.timeStatus);
          console.log("refresh success");
        }else{
          console.log("no refresh");
        }
      },() => {
        console.log("refresh error");
      },() => {
        console.log("refresh error");
      });
    }, 1800000);
    this.getKeyWords();
   
    if(os=== 'android') {
		this.dealVersionUpdate = DeviceEventEmitter.addListener('updateVersion', (param) => {
			if(param.isUpdate) {
				this.setState({
					showCheckVersionModal:true,
					modalContentText:"检测到新的版本("+param.newVersionCode+")，是否更新",
				})		
			}
		});
	}
  }
  componentWillUnmount(){
    if (os === 'android') {  
      BackHandler.removeEventListener('hardwareBackPress', () => Common.onBack(this));  
      this.dealVersionUpdate.remove()
    }
    this.refreshBillboard.remove();
    clearInterval(this.timer);
  }
	_update() {
		if(this.state.isConnected) {
			NativeModules.JsAndroid.jsVersion(
				(msg) => {
	
				},
				(versionStatus, version) => {
					/*this.setState({
						versionStatus:versionStatus,
						newVersion: version
					})
								
					callback && callback();*/
					if(versionStatus) {
						/*Alert.alert(
							'版本更新',
							"检测到新版本("+version+")，是否更新", [
								{ text: '立即更新', onPress: () => this._downloadNewVersion() },
								{ text: '以后再说', style: 'cancel' },
							],
							{ cancelable: false }
						)*/
						if (os !== 'android') { 
							this.setState({
								showCheckVersionModal:true,
								modalContentText:"检测到新的版本("+version+")，是否更新",
							})
						}
					}
	
				}
			);
		} else {
			Toast.show("当前没有网络", {
				duration: 3000,
				position: Toast.positions.CENTER,
				shadow: true,
				animation: true,
				hideOnPress: true,
				delay: 0
			})
		}
	}
  _downloadNewVersion(){
	
  	NativeModules.JsAndroid.jsVersionqqdownloader(
	  (msg) => {
	    alert("出错了，请稍后重试");
	  },
	  (x, y,) => {
		
	  }
	)
  }
  isShow = () => {
    var flag = this.state.modalVisible?false:true;
    this.setState({modalVisible: flag});
  };
  shareType = (data) =>{
    var data1,data2,data3;
    for(var i = 0, len = data.length; i< len;i++){
      switch (data[i].type){
        case 1:
          data1 = data[i];
          break;
        case 2:
          data2 = data[i];
          break;
        case 3:
          data3 = data[i];
          break;
        case 4:
          this.oneDayNews = data[i];
          break;
      }
    }
    switch(this.state.timeStatus){
      case 1:
        this.typeList.push(data1,data2,data3);
        this.switchType(this.state.typeStatus,this.typeList);
        break;
      case 2:
        this.typeListDay.push(data1,data2,data3);
        this.switchType(this.state.typeStatus,this.typeListDay);
        break;
      case 3:
        this.typeListWeek.push(data1,data2,data3);
        this.switchType(this.state.typeStatus,this.typeListWeek);
        break;
      case 4:
        this.typeListMonth.push(data1,data2,data3);
        this.switchType(this.state.typeStatus,this.typeListMonth);
        break;
      case 5:
        this.typeListHistory.push(data1,data2,data3);
        this.switchType(this.state.typeStatus,this.typeListHistory);
        break;
    }
  };
  fetchBillboardData = () => {
    this.setState({loading: true});
    let formData = new FormData();
    Common.fetchData("post", "/billboard/list", formData, (responseData) => {
      this.swiper = responseData.carouselResult;
      this.shareType(responseData.newsResult);
      this.setState({loading: false,
                      success: true,
                      timestamp: responseData.timestamp,
                      escape: responseData.escape[0].status == 1,
                      timeStatus: responseData.escape[0].status == 1?2:1
                    });
	  
		  this._update()
	  
    },() => {
      this.setState({loading: false,
                      success: false,
                      errorMessage: "请求失败",
                    });
      this._update()
    },() => {
      this.setState({loading: false,
                      success: false,
                      errorMessage: "网络错误",
                    });
      this._update()
    });
  };
  _onRefresh = (isBack=false) => {
    this.typeList = [];
    this.typeListDay = [];
    this.typeListWeek = [];
    this.typeListMonth = [];
    this.typeListHistory = [];
    this.setState({isRefreshing: !isBack,loading: isBack});
    this.timer = setTimeout(() => {
      let formData = new FormData();
      formData.append('range',this.state.timeStatus);
      Common.fetchData("post", "/billboard/list", formData, (responseData) => {
        this.swiper = responseData.carouselResult;
        this.shareType(responseData.newsResult);
        this.setState({success: true,
                        isRefreshing: false,
                        loading: false,
                        timestamp: responseData.timestamp,
                        escape: responseData.escape[0].status == 1,
                      });
      },() => {
        this.setState({ success: false,
                        isRefreshing: false,
                        loading: false,
                        errorMessage: "请求失败",
                      });
      },() => {
        this.setState({ success: false,
                        isRefreshing: false,
                        loading: false,
                        errorMessage: "网络错误",
                      });
      });
      clearTimeout(this.timer);
    },1000);
    
  };
  linking = (val) => {
    if(os == 'ios'){
      NativeModules.JsAndroid.openUrl(val.url);
    }else{
      Common.onForward(this,Article, val, val.type?val.type:4);
    }
  };
  goPage = (info) => {
    if(info.type){
      switch (info.type){
        case 1 :
        case 2 :
        case 3 :
          Common.onForward(this,Detail,info.type,info.id);
          break;
        case 4 :
        case 5 :
          this.linking(info);
          break;
        case 8 :
          Common.onForward(this,BriefIntroduction,"",info.id);
          break;
        case 9 :
          Common.onForward(this,SpecialColumnDetails,info.title,info.id);
          break;
      }
    }
  };
  _renderItemWithParallax =(item, index) => {
    return (
      <View style={{height: totalWidth*0.49,marginTop: 10}}>
        <CachedImage source={{ uri: item.mainPicPath }} style={{...StyleSheet.absoluteFillObject, borderRadius: 5}} />
      </View>
    );
  };
  renderHeader = () => {
    return (
      <Carousel
        width={totalWidth*0.88}
        height={totalWidth*0.49+10}
        autoplay={true}
        interval={4000}
        data={this.swiper}
        contentRender={(item,index) => this._renderItemWithParallax(item,index)}
        onPress={(item) => this.goPage(item)}
      />
      )
  };
  search = () => {
    if(this.state.scrollHeight >= 0){
      return(
        <View style={[styles.shadow,this.state.checkDevice == 'x'?{height: totalWidth*0.08+totalWidth*0.12,paddingTop: totalWidth*0.08}:{height: STATUS_BAR_HEIGHT+totalWidth*0.12,paddingTop: STATUS_BAR_HEIGHT}]}>
          <View key="search" style={styles.searchBox}>
            <Image source={require('../../images/home/LOGO.png')} />
            <TouchableWithoutFeedback onPress={() => Common.onForward(this, Search, this.state.keyWord)} >
              <View style={styles.search} >
                <Image style={styles.searchIcon} source={require('../../images/search.png')}/>
                <Text style={styles.key}>搜索关键词</Text>
              </View>
            </TouchableWithoutFeedback>
          </View>
        </View>);
    }else{
      return null;
    }
  };
  getKeyWords = () => {
    let formData = new FormData();
    Common.fetchData("post", "/search/hotKeywords", formData, (responseData) => {
     this.setState({keyWord: responseData.list});
    },() => {
      console.log('error');
    },() => {
      console.log('error');
    });
  };
  onScroll = (e) => {
    // var scrollH = e.nativeEvent.contentSize.height; //scrollview的高度
    var y = e.nativeEvent.contentOffset.y;//当前滑动显示的y轴坐标
    // var height = e.nativeEvent.layoutMeasurement.height ;//显示部分高度
    // if( y > totalWidth*0.613){
    //   this.setState({header: true});
    // }else{
    //   this.setState({header: false});
    // }
    this.setState({
      scrollHeight: y
    });
  };
  showNews = () => {
    var height = totalWidth*0.08;
    var width = totalWidth;

    let containerStyle = {};
    let pageStyle = {};

    if (Platform.OS == 'android') {
      let offset = (height - width) / 2;
      containerStyle.transform = [{rotate: "90deg"}];
      containerStyle.width = height;
      containerStyle.height = width;
      containerStyle.top = offset;
      containerStyle.left = offset * -1;

      pageStyle.transform = [{rotate: "-90deg"}];
      pageStyle.width = width;
      pageStyle.height = height;
      pageStyle.top = offset * -1;  //left
      pageStyle.right = offset  * -1;   //top
    } else {
      containerStyle.flex = 1;
      pageStyle.flex = 1;
    }
    if(this.oneDayNews.resultList.length){
      return(
        <TouchableWithoutFeedback key="facebook" onPress={() => {Common.onForward(this,NewsList)}}>
        <View style={{flexDirection: 'row',marginBottom: 10}}>
          <View style={{flexDirection: 'row',height: totalWidth*0.08,alignItems: 'center',justifyContent: 'space-between'}}>
            <View style={styles.title}>
              <Image style={styles.titleL} source={require("../../images/home/news.png")} />
            </View>
            <View style={{width: totalWidth*0.7, height: totalWidth*0.08,borderLeftWidth: 1,borderLeftColor: '#e5e5e5'}}>
              <View style={containerStyle}>
                <Swiper
                autoplay={true}
                autoplayTimeout={4}
                height={totalWidth*0.08}
                showsPagination={false}
                removeClippedSubviews={false}
                horizontal={Platform.OS == 'android'}
                width={Platform.OS == 'android' ? height : width}
                height={Platform.OS == 'android' ? width : height}
                autoplayDirection={true}
                >
                {
                  this.oneDayNews.resultList.map((val,idx) => {
                    return (
                      <View key = {idx} style={pageStyle}>
                        <View style={{width: totalWidth*0.7,flexDirection: 'row', paddingHorizontal: totalWidth*0.03, paddingVertical: totalWidth*0.02, alignItems: 'center',justifyContent: 'space-between'}}>
                          <TouchableHighlight underlayColor="#fafafa" delayPressIn={100} onPress={() => this.linking(val)}>
                            <Text style={{width: totalWidth*0.6, fontSize: 13, color: '#505050'}} numberOfLines={1}>{val.title}</Text>
                          </TouchableHighlight>
                          <Image style={{width: totalWidth*0.03,height: totalWidth*0.04,resizeMode: 'contain'}} source={require('../../images/me/next.png')}/>
                        </View>
                      </View>
                    )
                  })
                }
                </Swiper>
              </View>
            </View>
        </View>
        </View>
        </TouchableWithoutFeedback>
      ) 
    }else{
      return null
    }
  };
  fetchTimeData = (parm) => {
    let formData = new FormData();
    formData.append('range',parm);
    if(this.state.isConnected){
      Common.fetchData("post", "/billboard/moreList", formData, (responseData) => {
        this.shareType(responseData.newsResult);
        this.setState({isList:true,
                      timestamp: responseData.timestamp});
      },() => {
        this.setState({isList:false});
        console.log('error');
      },() => {
        this.setState({isList:false});
        console.log('error');
      });
    }else{
      this.setState({isList:false});
      Toast.show("当前网络不可用", { 
        duration: Toast.durations.LONG,
        position: Toast.positions.BOTTOM,
        shadow: true,
        animation: true,
        hideOnPress: true,
        delay: 0});
    }
  };
  switchType = (type,source) => {
    switch (type){
      case 'variety':
        this.setState({typeStatus: 'variety',
                        dataList: source[0]});
        break;
      case 'movie':
        this.setState({typeStatus: 'movie',
                      dataList: source[1]});
        break;
      case 'TV':
        this.setState({typeStatus: 'TV',
                      dataList: source[2]});
        break;
    }
  };
  switchData = (type,time) => {
    this.setState({timeStatus: time,typeStatus:type});
    switch (time){
      case 1:
        if(this.typeList.length){
          this.switchType(type,this.typeList);
        }else{
          this.fetchTimeData(time);
        }
        break;
      case 2:
        if(this.typeListDay.length){
          this.switchType(type,this.typeListDay);
        }else{
          this.fetchTimeData(time);
        }
        break;
      case 3:
        if(this.typeListWeek.length){
          this.switchType(type,this.typeListWeek);
        }else{
          this.fetchTimeData(time);
        }
        break;
      case 4:
        if(this.typeListMonth.length){
          this.switchType(type,this.typeListMonth);
        }else{
          this.fetchTimeData(time);
        }
        break;
      case 5:
        if(this.typeListHistory.length){
          this.switchType(type,this.typeListHistory);
        }else{
          this.fetchTimeData(time);
        }
        break;
    }
  };
  renderPartList = () => {
    return (
        <View style={[styles.typeRow,{marginBottom: 10,borderRadius: 10,marginHorizontal: 10}]}>
          {this.showNews()}
          <View style={{flex: 1,flexDirection: 'row',justifyContent: 'center',alignItems: 'center'}}>
            <View style={styles.title}>
              <TouchableWithoutFeedback style={{backgroundColor: "red"}} onPress={this.isShow}>
                <View style={{flexDirection: 'row',alignItems: 'center'}}>
                  <Image style={styles.titleL} source={require('../../images/home/report.png')} />
                  <Image style={styles.iconIndex} source={require('../../images/home/question_mark_a.png')}/>
                </View>
              </TouchableWithoutFeedback>
            </View>
            <View style={styles.part}>
              <TouchableHighlight underlayColor="#fafafa" delayPressIn={100} style={styles.partCon} onPress={() =>{this.switchData('variety',this.state.timeStatus)}} >
                <View style={styles.partConW}>
                  <Text style={[styles.partText,styles.partoneText,this.state.typeStatus == 'variety'?styles.partColor:null]}>综艺</Text>
                  {
                    this.state.typeStatus == 'variety'?<View style={styles.partLine}></View>:null
                  }
                </View>
              </TouchableHighlight>
              <TouchableHighlight underlayColor="#fafafa" delayPressIn={100} style={styles.partCon} onPress={() =>{this.switchData('TV',this.state.timeStatus)}}>
                <View style={styles.partConW}>
                  <Text style={[styles.partText,styles.partoneText,this.state.typeStatus == 'TV'?styles.partColor:null]}>剧集</Text>
                  {
                    this.state.typeStatus == 'TV'?<View style={styles.partLine}></View>:null
                  }
                </View>
              </TouchableHighlight>
              <TouchableHighlight underlayColor="#fafafa" delayPressIn={100} style={styles.partCon} onPress={() =>{this.switchData('movie',this.state.timeStatus)}} >
                <View style={styles.partConW}>
                  <Text style={[styles.partText,styles.partoneText,this.state.typeStatus == 'movie'?styles.partColor:null]}>大电影</Text>
                  {
                    this.state.typeStatus == 'movie'?<View style={styles.partLine}></View>:null
                  }
                </View>
              </TouchableHighlight>
            </View>
          </View>
          <View style={[styles.part,{backgroundColor: '#fffdfe'}]}>
            {
              this.state.escape?null:
              <TouchableHighlight underlayColor="#fafafa" delayPressIn={100} style={styles.partCon} onPress={() => {this.switchData(this.state.typeStatus,1)}}>
                <View style={styles.partConW}>
                  <Text style={[styles.partText,this.state.timeStatus == 1?styles.partColor:null]}>8小时</Text>
                  {
                  this.state.timeStatus == 1?<View style={styles.partLine}></View>:null
                  }
                </View>
              </TouchableHighlight>
            }
            <TouchableHighlight underlayColor="#fafafa" delayPressIn={100} style={styles.partCon} onPress={() => {this.switchData(this.state.typeStatus,2)}}>
              <View style={styles.partConW}>
                <Text style={[styles.partText,this.state.timeStatus == 2?styles.partColor:null]}>24小时</Text>
                {
                  this.state.timeStatus == 2?<View style={styles.partLine}></View>:null
                }
              </View>
            </TouchableHighlight>
            <TouchableHighlight underlayColor="#fafafa" delayPressIn={100} style={styles.partCon} onPress={() => {this.switchData(this.state.typeStatus,3)}}>
              <View style={styles.partConW}>
                <Text style={[styles.partText,this.state.timeStatus == 3?styles.partColor:null]}>7日</Text>
                {
                  this.state.timeStatus == 3?<View style={styles.partLine}></View>:null
                }
              </View>
            </TouchableHighlight>
            <TouchableHighlight underlayColor="#fafafa" delayPressIn={100} style={styles.partCon} onPress={() => {this.switchData(this.state.typeStatus,4)}}>
              <View style={styles.partConW}>
                <Text style={[styles.partText,this.state.timeStatus == 4?styles.partColor:null]}>月度</Text>
                {
                  this.state.timeStatus == 4?<View style={styles.partLine}></View>:null
                }
              </View>
            </TouchableHighlight>
            <TouchableHighlight underlayColor="#fafafa" delayPressIn={100} style={styles.partCon} onPress={() => {this.switchData(this.state.typeStatus,5)}}>
              <View style={styles.partConW}>
                <Text style={[styles.partText,this.state.timeStatus == 5?styles.partColor:null]}>历史排名</Text>
                {
                  this.state.timeStatus == 5?<View style={styles.partLine}></View>:null
                }
              </View>
            </TouchableHighlight>
          </View>
          {
            this.state.isList?
            <RankList data={this.state.dataList} time={this.state.timeStatus} {...this.props}/>:
            <View style={{height: totalWidth*0.5, alignItems: 'center', justifyContent: 'center'}}>
              <TouchableOpacity onPress={() => this.fetchTimeData(this.state.timeStatus)}>
                <Text>重新获取数据</Text>
              </TouchableOpacity>
            </View>
          }
        </View>
      )
  };
  render() {
    return (
      <View style={{flex: 1}}>
        {this.search()}
      {
        this.state.loading?
          <Loading />:
          (this.state.success?
            <View style={{flex: 1}}>
              <ScrollView
                ref = {(e) => this.location = e} 
                automaticallyAdjustContentInsets={false}
                scrollEventThrottle={200}
                refreshControl={
                  <RefreshControl
                    refreshing={this.state.isRefreshing}
                    onRefresh={this._onRefresh}
                    />
                }
                style={[styles.container,this.state.checkDevice == 'x'?{marginBottom: totalWidth*0.07}:null]}>
                {this.renderHeader()}
                {this.renderPartList()}
              </ScrollView>
            </View>
            :<LoadError reload={this.fetchBillboardData} reason={this.state.errorMessage}/>
          ) 
        }
        <Modal animationType={"fade"}
          transparent={true}
          visible={this.state.modalVisible}
          onRequestClose={this.isShow}>
          <TouchableOpacity style={styles.mask} onPress={this.isShow}>
            <TouchableOpacity style={styles.tipBox} activeOpacity={1}>
              <View>
              <View style={styles.tipTitle}>
               <Image style={styles.tipTitleI} source={require('../../images/home/question_mark_d.png')} />
                <Text style={styles.tipTitleT}>指标说明</Text>
              </View>
              <View style={styles.tipContent}>
                <View style={styles.tipCon}>
                  <Text style={styles.tipConL}>报道指数：</Text>
                  <Text style={styles.tipConR}>行业媒体分为五个等级，每个等级权值不同；报道指数=[(该行业媒体权值*报道数量)/该等级行业媒体数量]总和。</Text>
                </View>
                <View style={styles.tipCon}>
                  <Text style={styles.tipConL}>舆情分析：</Text>
                  <Text style={styles.tipConR}>通过对主流媒体的报道内容智能分析，识别出媒体的情感意见，以图表时间轴形式动态展示正负面评论，并显示最具特色的评论内容。</Text>
                </View>
              </View>
              </View>
            </TouchableOpacity>
          </TouchableOpacity>
        </Modal>
        {
        	this.state.showCheckVersionModal ?
				<ShapeModal 
		        	show ={this.state.showCheckVersionModal}
		        	type = "confirm"
		        	modalContentStyle={styles.modalContentStyle}
		        	showModalShape = {true}
		        	bgColor="rgba(0,0,0,0.5)"
		        	modalContentText={this.state.modalContentText}
		        	modalButton = {[{
		        		"text":"立即更新",
		        		"color":"#008fff",
		        		"handler":this._downloadNewVersion.bind(this)
		        	},{
		        		"text":"以后再说",
		        		"type":"cancel",
		        		"color":"#8e8e8e"
		        	}]}
		        	
		        />  : null     	
        
        }
      </View>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    backgroundColor: '#f0f0f0',
  },
  slider: {
      marginTop: 5,
      overflow: 'visible' // for custom animations
  },
  sliderContentContainer: {
      paddingVertical: 5 // for custom animation
  },
  shadow: {
    backgroundColor: "#ff4546",
    width: totalWidth,
  },
  bgimg: {
    width: totalWidth,
    height: totalWidth*0.678,
  },
  searchBox: {
    flex: 1,
    height: totalWidth*0.8,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  search: {
    position: 'relative',
    width: totalWidth*0.75,
    height: totalWidth*0.07,
    borderRadius: totalWidth*0.035,
    backgroundColor: 'white',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  searchIcon: {
    position: 'absolute',
    left: 10,
    width: totalWidth*0.0425,
    height: totalWidth*0.0425,
  },
  key: {
    color: '#bbbbbb',
    fontSize: 12,
  },
  line: {
    flex: 1,
    height: 2/PixelRatio.get(),
  },
  typeRow: {
    flex: 1,
    backgroundColor: '#ffffff',
    paddingTop: totalWidth*0.04,
    marginTop: 10,
  },
  title: {
    height: totalWidth*0.05,
    paddingLeft: totalWidth*0.035,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: totalWidth*0.0132
  },
  titleL: {
    width: totalWidth*0.2,
    flexDirection: 'row',
    alignItems: 'center',
    resizeMode: 'contain',
  },
  titleW: {
    backgroundColor: '#fff7f8',paddingVertical: 5,paddingHorizontal: 10,borderRadius: 20,marginRight: 5
  },
  icon: {
    width: 2,
    height: 2,
    borderRadius: 1,
    backgroundColor: '#ff4546',
  },
  text: {
    color: '#fe4646',
    fontSize: 14,
  },
  iconIndex: {
    width:totalWidth*0.0386,height: totalWidth*0.0386,resizeMode: 'contain',marginLeft: totalWidth*0.0132,
  },
  part: {
    flex:1,flexDirection: 'row',height: totalWidth*0.0864,
  },
  partCon: {
    flex: 1,justifyContent: 'center',alignItems: 'center',
  },
  partConW: {
    height: totalWidth*0.09, alignItems: 'center',justifyContent: 'center'
  },
  partLine: {
    width: 10/PixelRatio.get(),height: 3/PixelRatio.get(),backgroundColor: '#fe4445',marginTop: 5
  },
  partText: {
    fontSize: 12,
    color: '#474747'
  },
  partoneText: {
    fontSize: 14,
  },
  partColor: {
    color: '#ff4546',
  },
  partoneBorder: {
    borderBottomWidth: 2/PixelRatio.get(),
    borderBottomColor: '#fdb1b1',
  },mask: {
    flex: 1,
    backgroundColor:'rgba(0, 0, 0, 0.5)', 
    justifyContent: 'center',
    alignItems: 'center',
  },
  tipBox: {
    paddingBottom: totalWidth*0.037,
    backgroundColor: '#fff',
    borderRadius: 5,
  },
  tipTitle: { 
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: totalWidth*0.03,
    paddingBottom: totalWidth*0.005,
  },
  tipTitleI: {
    width: totalWidth*0.04,
    height: totalWidth*0.04,
    resizeMode: 'contain',
    marginRight: 2,
  },
  tipTitleIT: {
    color: '#fff',
    fontSize: 12,
  },
  tipTitleT: {
    color: '#000',
    fontWeight: 'bold',
    fontSize: 13,
  },
  tipCon: {
    width: totalWidth*0.8,
    flexDirection: 'row',
    paddingHorizontal: totalWidth*0.037,
    paddingVertical: 2,
  },
  tipConL: {
    flex: 2,
    color: '#ff4546',
    lineHeight: Math.round(totalWidth*0.05),
    fontSize: 11,
  },
  tipConR: {
    flex: 7,
    color: '#000',
    lineHeight: Math.round(totalWidth*0.05),
    fontSize: 11,
  }
});